import { useState, useEffect } from 'react';
import { Input, Button, Select } from 'antd';
import { cloneDeep } from 'lodash';
import uuid from 'react-uuid';

const DynamicForm = (props) => {
  const [obj, setObj] = useState();

  useEffect(() => {
    setObj(props.value);
    console.log(props.value, '----values');
    demoHandle();
    countHandle(123321);
  }, []);
  const demoHandle = () => {
    let arr = [1, 2, [3, 4], [5, [6, 7], 8], [9], 10];
    const newArr = Array.from(new Set(arr.toString().split(','))).map((item) =>
      Number(item),
    );
    console.log(newArr, '--arr');
    console.log(Array.from(new Set(arr.flat(Infinity))), '--arr2');
  };

  const countHandle = (number) => {
    let newArr = number.toString().split('');
    let len = Math.floor(newArr.length / 2);
    let arr1 = newArr.slice(0, len);
    let arr2 = newArr.slice(len).reverse();
    let flag = true;
    if (arr1.length === arr2.length) {
      flag = listCount(arr1, arr2);
    } else {
      arr2.pop();
      flag = listCount(arr1, arr2);
    }
    console.log(flag, '---count');
    function listCount(list, list2) {
      let flag = list.every((item, index) => {
        return item === list2[index];
      });
      return flag;
    }
  };

  const demo = (s) => {
    let len = s.length;
    if (len >= 1 && len <= Math.pow(10, 5)) {
      let leftBracketNum = [];
      let rightBracketNum = [];
      for (let i = 0; i < len; i++) {
        let temp = s.charAt(i);
        if (temp === '(') {
          leftBracketNum.push(temp);
        }
        if (temp === ')') {
          rightBracketNum.push(temp);
        }
      }
      if (leftBracketNum.length === rightBracketNum.length) {
        return 0;
      } else {
        const poor = leftBracketNum.length - rightBracketNum.length;
        if (poor > 0) {
          return poor;
        } else {
          return Math.abs(poor);
        }
      }
    } else {
      return '字符超出长度范围';
    }
  };

  const handleChange = (value) => {
    const newObj = Object.assign({}, obj, { selectValue: value });
    setObj(newObj);
    props.onChange(newObj);
  };
  const handleInput = (e) => {
    const value = e.target.value;
    const newObj = Object.assign({}, obj, { inputValue: value });
    setObj(newObj);
    props.onChange(newObj);
  };
  return (
    <div>
      <Select onChange={handleChange} value={obj?.selectValue}>
        <Select.Option value={'a'}>a</Select.Option>
        <Select.Option value={'b'}>b</Select.Option>
        <Select.Option value="c">c</Select.Option>
      </Select>
      <Input value={obj?.inputValue} onChange={handleInput} />
      <Button onClick={() => props.deleteList(props.k)}>Delete</Button>
    </div>
  );
};

export default DynamicForm;
